<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<style type="text/css">
*{
    padding:0;
    margin:0;
    border:none;
}
#news{
    width:300px;
    height:50px;
    margin:20px auto;
    background-color:#CCC;
    border:#039 solid 1px;
    overflow:hidden;/*这里必须设置哦，否则滚动会消失的，如果设置为scroll，更容易明白原理*/
}
#news li{
    line-height:30px;
}
</style>
</head>
<body>
<div id="news" onmouseover="tz()" onmouseout="ks()">
<ul id="p1">
<li><a href="">1这是测试新闻滚动效果</a></li>
<li><a href="">2这是测试新闻滚动效果</a></li>
<li><a href="">3这是测试新闻滚动效果</a></li>
<li><a href="">4这是测试新闻滚动效果</a></li>
<li><a href="">5这是测试新闻滚动效果</a></li>
<li><a href="">6这是测试新闻滚动效果</a></li>
<li><a href="">7这是测试新闻滚动效果</a></li>
<li><a href="">8这是测试新闻滚动效果</a></li>
</ul>
<ul id="p2">
</ul>
</div>
<script type="text/javascript">
var n=document.getElementById("news");
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p2.innerHTML=p1.innerHTML;
//alert(n.offsetHeight+" 1  "+p1.offsetHeight);
var f=function(){
//  n.scrollTop++;
//	n.scrollTop=n.scrollTop+50;
	
    if(n.scrollTop>=p1.offsetHeight){
        //alert(n.scrollTop+" 1  "+p1.offsetHeight);
        n.scrollTop=0;
    }
}
var i=setInterval(f,100);
var tz=function(){
    clearInterval(i);
}
var ks=function(){
    i=setInterval(f,100);
}
</script>
</body>
</html>